import { FC } from "react";
import useGetQuestion from "../../hooks/useGetQuestion";
import { getComponentByType ,componentPropsType} from "../../questioncomponents";
import { useDispatch } from "react-redux";
import { changeComponent } from "../../store/ComponentReducer";

const NotFund:FC = ()=>{
    return <div>未选择组件</div>
}

const ComponentProps:FC = ()=>{
    const dispatch = useDispatch()
    const {selectedComponent } = useGetQuestion()
    if(!selectedComponent){
        return <NotFund></NotFund>
    }
    const {fe_id,type,props,lock} = selectedComponent
    const componentConfig = getComponentByType(type)
    if(!componentConfig){
        return <NotFund></NotFund>
    }
    //实时修改组件的属性值
    const onchange = (props:componentPropsType)=>{
        dispatch(changeComponent({fe_id,newProps:props}))
    }
    const {PropsComponent} = componentConfig
    return <>
       <PropsComponent {...props} onchange={onchange} islock = {lock}></PropsComponent>
    </>
}

export default ComponentProps